<template>
<<<<<<< HEAD
   <div>
       我的课程
         <van-dropdown-menu>
                <van-dropdown-item :options='options1' v-model="mysort" />
                <van-dropdown-item :options='options2' v-model="myorder" />
        </van-dropdown-menu>
       <center>
           <van-button color='orange' @click="get_all(1)">确认查询列表</van-button>
           <van-checkbox-group v-model="checklist" ref='checkboxGroup'>

               <!-- 搜索文本框 -->
               <van-search placeholder = "请输入搜索关键词" v-model="keyword" @click="myaction('search')" />
               
               <van-button round type="info" @click="get_all(1)">点击查询</van-button>
               
               <table>
                   <tr v-for="i,j in klist">
                       <td @click="set_keyword(i.keyword)" v-html="replaceArr(i.keyword,keyword)">{{i.keyword}}</td>
                   </tr>
               </table>
           
       <table border="1">
           <tr style="padding:2rem;">
               <td>
                   <button @click="checkall">全选</button>
                   <button @click="toggleall">反选</button>
                </td>
               <td>课程id</td>
               <td>课程分类</td>
               <td>课程标题title</td>
               <td>课程简介desc</td>
               <td>课程价格</td>
               <td>课程状态</td>
               <td>操作</td>

           </tr>
           <tr v-for='item,index in courselist'>
               <td><van-checkbox :name='item.id'></van-checkbox></td>
               <!-- <td><input type="checkbox" :value="item.id" v-model="list1"></td> -->
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td v-html="item.title_highliaht">{{item.title_highliaht}}</td>
               <td v-html="item.desc_highliaht">{{item.desc_highliaht}}</td>
               <td>{{item.price}}</td>
               <td>{{item.state}}</td>
               <td>
                   <van-button color='red' @click="del_course(item.id,index)">删除</van-button>
                   <van-button color='red' @click="editcourse(item.id)">修改课程</van-button>
                   <van-button color='blue' @click="get_video(item.id)">视频列表</van-button>
               </td>

           </tr>

       </table>
       </van-checkbox-group>
       <van-button @click="dellist">确认删除</van-button>
        <van-button v-show='lastpage' @click="get_all(lastpage)">上一页</van-button>
           当前第 {{pages}} 页
                <span v-for="i in pagecount">
                    <van-button  color="red" @click="get_all(i)" v-if="pages==i">{{i}}</van-button>
                    <van-button  color="blue" @click="get_all(i)" v-else>{{i}}</van-button>

                </span>
                <van-button v-show='nextpage' @click="get_all(nextpage)">下一页</van-button>
                去往第 <input type="text" v-model="input_page" @click="myaction('jump')"> 页
       </center>
       下拉框选择页面
       <select name="" id="" @change="get_all(pages)" v-model="pages">
           <option v-for='i in pagecount'> {{i}} </option>
       </select>

        <!-- 弹窗页面(就是遮罩) -->
            <van-popup v-model="show">

                请问是否确定删除
                <van-button color='blue' @click="ok">是的</van-button>
                <van-button color='orange' @click="cancel">取消</van-button>

            </van-popup>

            <van-popup v-model="is_show">

                <!-- 视频播放器列表 -->
                <van-button v-if="videolist.length > 0" v-for='item,index in videolist' @click="play(item)" :key="index">第{{index+1}}集</van-button>

                <div v-if='videolist.length == 0'>暂无视频</div>

                <video width="300" height="300" :src="src" controls="controls" autoplay="autoplay"  muted ></video>

            </van-popup>
 


   </div>
</template>

<script>
export default {
   data () {
      return {
        courselist:[],
        show : false,
        //视频点播列表
        videolist:[],
        //播放器弹窗展示
        is_show:false,
        uid:localStorage.getItem('id'),
        //视频播放地址
        src:'',
        //当前页码 默认第一页
        pages:1,
        //上一页
        lastpage:0,
        //下一页
        nextpage:0,
        //总页码
        pagecount:0,
        list1:[],
        //前往
        input_page:'',
        //重复点击
        repeat:0,
        //选中的课程列表
        checklist:[],
        //选项列表(排序选项)
        options1:[{text:'价格',value:0},{text:'id',value:1}],
        //排序类型
        options2:[{text:'正序',value:0},{text:'倒序',value:1}],
        //默认排序
        mysort:0,
        //默认排序方式
        myorder:0,
        //重新赋值排序
        old_sort:0,
        //重新赋值排序方式
        old_order:0,
        //搜索词
        keyword:'',
        //提示信息容器
        klist:[],
        //文本框焦点所在位置
        myinput:''

      };
   },
   //监听属性
   watch:{
       //监听方法
       keyword:function(){
           console.log(this.keyword);
           //实时监听获取数据
           this.get_keyword();

       }


   },
   //自定义过滤器
   	filters:{

			myfilter:function(value){
				if(value === 0){
					return "待审";
=======
<div>


	<myheader />

	<h1>我的课程</h1>




	<center>


		<van-search placeholder="请输入搜索关键词" v-model="keyword" @click="myaction('search')"  />

		<table>
			
			<tr v-for="item,index in klist"> <td @click="set_keyword(item.keyword)"> {{ item.keyword }}  </td> </tr>

		</table>
	
		<van-checkbox-group v-model="checklist" ref="checkboxGroup">

		<table border="1" >
			

			<tr style="padding:2rem;">


				<td>
					
					<a @click="checkAll">全选</a>/<a @click="toggleAll">反选</a>

				</td>
				
				<td> 

				课程id </td>  <td> 课程分类 </td> <td> 课程标题 </td>  <td> 课程状态 </td>

				 <td> 操作 </td> 

			</tr>


			<tr v-for="item,index in courselist">


				<td>
					
					<van-checkbox :name="item.id"></van-checkbox>

				</td>
				

				<td>
				{{ item.id }}</td> <td>{{ item.name }}</td> <td v-html="item.title_highlight"></td> <td>{{ item.state }}</td>

				<td> <van-button @click="editcourse(item.id)" >修改课程</van-button> <van-button color="gray" @click="videos(item.id)">视频列表</van-button></td>


			</tr>



		</table>

	</van-checkbox-group>


		<div> 

			一共有{{ page_num }}页 , 当前页:{{ page }}

			<ul>

				<li v-show="lastpage" @click="get_data(lastpage)">上一页</li>
				
				<li v-for="index in page_num">
					
					<a @click="get_data(index)"> {{ index }} </a>

				</li>

				<li v-show="nextpage" @click="get_data(nextpage)">下一页</li>


			</ul>


		</div>


		<select v-model="select_page" @change="get_data(select_page)" >
			
			<option value="">请选择</option>

			<option v-for="item in page_num" :value="item">
				
				第{{ item }}页

			</option>

		</select>


		<van-field label="输入页码" v-model="jump_page" placeholder = "请输入您要跳转页数" @click="myaction('jump')" />

		<van-button color="blue" @click="jump">跳</van-button>


		<van-button color="orange" @click="delall">删除所选</van-button>



		</center>





		<!--灰度弹窗-->

		<van-popup v-model="show">
			
			<div style="width:500px;height400px;">

			<van-button @click="play(item)" v-if="videolist.length > 0" v-for="item,index in videolist" :key="index">
			第 {{ index+1 }} 集
			</van-button>

			<div v-if="videolist.length == 0">暂无视频</div>


			<video v-show="src" width="200" height="300" :src="src" controls="controls" muted autoplay="autoplay">
				

			</video>

			</div>


		</van-popup>


</div>
</template>


<script>


//导入其他组件
import myheader from './myheader.vue';



export default{

	//声明组件
	components:{

		'myheader':myheader,
		
	},
	//声明变量
	data(){

		return {

			courselist:[],
			//播放器弹窗展示
			show:false,
			//视频点播列表
			videolist:[],
			//视频播放地址
			src:"",
			//当前页
			page:1,
			//总页数
			page_num:0,
			//每页显示个数
			num:3,
			//上一页
			lastpage:0,
			//下一页
			nextpage:0,
			result:[],
			//选中的课程列表
			checklist:[],
			//选中的页数
			select_page:"",
			//跳转页数
			jump_page:"",
			//搜索词
			keyword:"",
			//提示信息容器
			klist:[],
			//文本框焦点所在位置
			myinput:""

		}


	},
	//监听属性
	watch:{

		//监听方法
		keyword:function(){


				console.log(this.keyword);

				this.get_keyword();

		}


	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				if(value === 0){

					return "待审";

>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
				}else if(value  ===1 ){
					return "审核通过";
				}
				else{
					return "审核拒绝";
				}
<<<<<<< HEAD
			}
	},

   methods: {
       //获取用户行为
       myaction:function(type){
            console.log(type);  
            this.myinput = type;
       },
       //提示高亮内容
         replaceArr:function (item,keyword) {
        let Reg = new RegExp(keyword)
        if (item) {
        let res = item.replace(Reg, `<font color='red'>${keyword}</font>`);
        return res;
        }
        },
       //赋值keyword
       set_keyword:function(keyword){
           this.keyword = keyword;
           this.get_all();
            this.keyword = '';
            this.klist = []
           
       },
       //获取关键字提示接口
       get_keyword:function(){
            this.axios.get(this.localhost+'keyword/',{
                params:{
                    id:localStorage.getItem('id'),
                    keyword:this.keyword
                }
            }).then(res=>{
                console.log(res);
                //赋值操作
                this.klist = res.data;
            })
       },
       //全选
       checkall:function(){
           this.$refs.checkboxGroup.toggleAll(true);
        //    for (var i = 0;i <courselist.length;i++){
        //        var id = courselist[i]['id'];
        //    }
       },
       //反选
       toggleall:function(){
           this.$refs.checkboxGroup.toggleAll();
        //    for (var i = 0; i <checklist.length;i++){
        //        checklist[i]
        //    }
        //    for (var i = 0;i < courselist.length;i++){
        //        if (courselist[i]['id'] not in checklist){
        //             // 添加
        //        }else{
        //         //    删除
        //        }
        //    }
       },
       //删除表单信息
       dellist:function(){  
           var check_str ='';
           for (var i = 0;i<this.checklist.length;i++){
               check_str += this.checklist[i]+',';
           }
           check_str = check_str.substr(0,check_str.length-1)
           this.axios.delete(this.localhost+'dellist/',{
               params:{
                   id:check_str
               }
           }).then(res=>{
               if(res.data.code == 200){
                   this.$toast.success(res.data.meg)
                   //遍历删除
                   var index_list = [];
                   for (let i = 0; i < this.courselist.length; i++) {

                       for (var j = 0; j < this.checklist.length; j++) {

                            //判断id是否相等
                            if (this.courselist[i]['id'] === this.checklist[j]){
                                index_list.push(i);
                            }
                    }
                }
                for (let i = 0; i < index_list.length; i++) {
                    this.courselist.splice(index[i],1);                    
                }
                   
               }
           })
           console.log(check_str);
       },
       //修改跳转
       editcourse:function(fid){
           this.$router.push({path:'/editcourse',query:{fid:fid}});  
       },
       //播放视频
       play:function(item){
           this.src = this.upload_dir + this.uid +'/'+ item;
       },
       //获取某一个课程的视频
       //视频列表播放器
       get_video:function(fid){
           //开启弹窗
           this.is_show = true
           this.src = ''
           //请求接口
           this.axios.get(this.localhost+'getcourse/',{
           params:{
               fid:fid,
               token:localStorage.getItem('token')
           }
       })
           .then(res=>{
               console.log(res);
               if (res.data.video == null){
                   this.videolist = [];
               }else{
                   //转换数据类型  将字符串转换为可用类型
                    var video_list = JSON.parse(res.data['video']);
                    this.videolist = video_list;
                    console.log(this.videolist);
               }
               
           })

           
       },
       //取消删除
       cancel:function(){
           this.show = false;
       },
       //删除课程
       ok:function(){
           this.axios.delete(this.localhost+'del_course/',{
               params:{
                   id:window.course_id,
                   uid:localStorage.getItem('id'),
                   token:localStorage.getItem('token')
               }
           })
           .then(res=>{
               console.log(res);
               if (res.data.code == 200){
                   this.show = false
                   this.$toast.success(res.data.meg);
                   //动态删除
                   this.courselist.splice(window.del_course_index,1);
               }
           })
       },
       //删除方法
       del_course:function(id,index){
           //全局变量传递文件名  使用之后可以自动回收内存空间
           window.course_id = id;
           this.show = true;
           console.log(id);
           window.del_course_index = index;

       },
       //判断是否让进入获取分页数据
       jump_page:function(){
            this.input_page = Number(this.input_page)
           if (this.input_page > this.pagecount || this.input_page <= 0){
               console.log(this.input_page);
               this.$toast.fail('超出范围')
               return false;
           }else{
               this.get_all(this.input_page)
           }
       },
       //获取分页全部数据
       get_all:function(page){
           //重复获取
        //    if(this.repeat == page && this.old_sort == this.mysort && this.old_order == this.myorder){
        //        return false;
        //    }
              this.axios.get(this.localhost+'getcourse/',{
           params:{
               id:localStorage.getItem('id'),
               token:localStorage.getItem('token'),
               pages:page,
               //价格,id
               options1:this.mysort,
               //正序倒叙
               options2:this.myorder,
                //模糊查询关键字
               keyword:this.keyword
           }
       })
           .then(res=>{
               console.log(res);
               this.courselist = res.data.data;
               console.log(res.data.data);
               this.pagecount=res.data.pageCount;
               this.pages = page;
               //重复点击
               this.repeat = page;
               //选项值
               this.old_sort = this.mysort;
               //正序,倒叙
               this.old_order = this.myorder


               //判断上一页
               if (page === 1){
                   this.lastpage = 0;
               }else{
                   this.lastpage = page - 1
               }
               //判断尾页
               if (page === this.pagecount){
                   this.nextpage = 0;
               }else{
                   this.nextpage = page + 1;
               }
           })
       }
   },

   computed: {},

   mounted() {
    this.get_all(1)
   },
   created(){
       //绑定键盘
       var that = this;
       //绑定事件
       document.onkeydown = function(e){
           //获取按键的值
           var key = window.event.keyCode;
           //回车键代码13
           if (key === 13){
               if (that.myinput === 'jump'){
                   that.jump_page();
               }
               else{
                   that.get_all(1);
               }
           }
           //取消键代码27
           if (key === 27){
               that.input_page = ''
           }
       }

   },

   components: {}
}
</script>
<style lang='css' scoped>

</style>    
=======


			}

	},
	//构造方法
	created(){

		//绑定键盘
		var that = this;

		//绑定事件
		document.onkeydown = function(e){


			//获取按键的值
			var key = window.event.keyCode;

			//回车键
			if(key === 13){


				if(that.myinput == "jump"){
				that.jump();
			}else{

				that.get_data(1);

			}

			}

		}

	},
	//初始化方法
	mounted(){

			this.get_data(1);		

	},
	//声明方法
	methods:{

		//获取用户行为
		myaction:function(type){


			console.log(type);

			this.myinput = type;



		},
		//赋值keyword
		set_keyword:function(keyword){


			this.keyword = keyword;

			this.get_data();

			this.keyword = "";

			this.klist = [];



		},
		//跳转
		jump:function(){

			this.get_data(this.jump_page);

		},
		//删除多选
		delall:function(){

			var check_str = "";

			console.log(this.checklist);

			for (var i = 0; i < this.checklist.length; i++) {

				    check_str += this.checklist[i]+",";
			}

			check_str = check_str.substr(0,check_str.length - 1);

			console.log(check_str);


			//发送请求
			this.axios.delete(
				'http://localhost:5000/delcourse/',{

					params:{

						id:check_str
					}

				}).then((result) =>{

					console.log(result);

					if(result.data.code == 200){

						this.$toast.success("删除成功");


						//遍历删除

						var index_list = [];

						for (var i = 0; i < this.courselist.length; i++) {


							for (var j = 0; j < this.checklist.length; j++) {
							
								
								//判断id是否相等

								if(this.courselist[i]['id'] === this.checklist[j]){

									index_list.push(i);

								}

							

							}

						}

						console.log(index_list);

						//遍历下标删除
						for (var i = 0; i < index_list.length; i++) {
							this.courselist.splice(index_list[i],1);
						}

						


					}


					

			});





		},
		 checkAll() {

      this.$refs.checkboxGroup.toggleAll(true);

      // for (var i = 0; i < courselist.length; i++) {
      				
      // 				var id = courselist[i]["id"];

      // 				this.checklist.push(id);

      // }


      console.log(this.result);
    },

    //反选
    toggleAll() {

      
      this.$refs.checkboxGroup.toggleAll();


      // for (var i = 0; i < checklist.length; i++) {
      				
      // 				checklist[i]
      // }

      // for (var i = 0; i < courselist.length; i++) {
      	

      // 			if(courselist[i]['id'] not in checklist){




      // 			}else{



      // 			}
      

      // }
    

    },
    //获取关键字提示接口
    get_keyword:function(){


    	//发送请求
			this.axios.post(
				'http://localhost:5000/keyword/',this.qs.stringify({
        id:'你好'
      })).then((result) =>{

					console.log(result);

					//赋值
					this.klist = result.data;

			});



    },
		//获取课程数据 分页
		get_data:function(page){


			this.myaxios("http://localhost:8000","put",{"id":"222"}).then(data => {
        console.log(data)
      });
			return false;


			this.page = page;

			//发送请求
			this.axios.delete(
				'http://localhost:8000',{

					params:{

						id:1,
					}

				}).then((result) =>{

					console.log(result);

					//赋值

					// this.courselist = result.data.data;

					// this.page_num = result.data.page_num;

					// // 判断上一页和下一页
					// if(page===1){

					// 	this.lastpage = 0;

					// }else{

					// 	this.lastpage = page - 1;
					// }


					// //判断下一页
					// if(page === this.page_num){


					// 	this.nextpage = 0;

					// }else{

					// 	this.nextpage = page + 1;

					// }
					

			});



		},
		//修改跳转
		editcourse:function(fid){


			this.$router.push({path:'/editcourse',query:{fid:fid}});

		},
		//播放视频

		play:function(src){


			this.src = this.upload_dir + localStorage.getItem("id")+"/"+src;


		},
		//视频列表播放器
		videos:function(fid){


			//开启弹窗
			this.show = true;

			this.src = "";


			this.axios.get(
				'http://localhost:5000/getcourse/',{

					params:{

						fid:fid,
						token:localStorage.getItem("token")
					}

				}).then((result) =>{

					console.log(result);


					if(result.data.video === null){

						this.videolist = [];

					}else{

					//转换数据类型
					var video_list = JSON.parse(result.data.video);

					this.videolist = video_list;

					console.log(this.videolist);

					}

			});




		}


	}


}
	


</script>


<style>

.on { background:purple }
.off {background:orange }

li {display:inline-block;}

font {

	background-color:red;
	color:white;

}

</style>
>>>>>>> afcc523b004321adbe11ac83d9b5087146701336
